<template>
  <div class="app-container">
    <el-row>
      <el-col
        v-for="(item, index) in list"
        :key="index"
        :lg="8"
        :md="8"
        :sm="8"
        style="padding: 6px"
        :xl="6"
        :xs="24"
      >
        <el-card :body-style="{ padding: '0' }" shadow="hover">
          <div class="goods-card-body">
            <div class="goods-tag-group">
              <el-tag v-if="+item.id === +plant.soil_id" hit type="primary">
                当前选中
              </el-tag>
            </div>
            <el-button
              class="goods-button-group"
              type="success"
              @click="handleChecked(item)"
            >
              设为选中
            </el-button>
            <div class="goods-image-group">
              <div class="goods-image">
                <el-image
                  v-if="item.picture || item.svg"
                  :class="{ isSvg: item.svg }"
                  fit="cover"
                  :src="item.picture || item.svg"
                />
              </div>
            </div>
            <div class="goods-title">{{ item.name }}</div>
            <div class="goods-description">
              {{ item.descri }}
            </div>
            <div class="h12"></div>
            <div class="goods-detail">
              <el-link
                class="mr12"
                icon="el-icon-edit"
                type="primary"
                @click="handleEdit(item)"
              >
                编辑
              </el-link>
              <el-link
                icon="el-icon-document"
                type="success"
                @click="handleDetail(item)"
              >
                详情
              </el-link>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <edit ref="edit" @getSoils="getSoils" />
    <detail ref="detail" />
  </div>
</template>

<script>
  import Edit from './components/edit'
  import Detail from './components/detail'
  import { getSoils } from '@/api/device'
  import { updateOne } from '@/api/field'
  import { mapGetters } from 'vuex'
  export default {
    components: { Edit, Detail },
    data() {
      return {
        list: [],
      }
    },
    computed: {
      ...mapGetters(['plant']),
    },
    created() {
      this.getSoils()
    },
    methods: {
      async getSoils() {
        const {
          data: { data },
        } = await getSoils()
        this.list = data
      },
      handleEdit(row) {
        this.$refs.edit.show(row)
      },
      handleDetail(row) {
        this.$refs.detail.show(row)
      },
      handleChecked(row) {
        this.$baseConfirm('确定将该数据设为选中状态吗？', null, async () => {
          const { msg } = await updateOne(this.plant.field_id, {
            soil_id: row.id,
          })
          this.$baseMessage(msg, 'success', 'vab-hey-message-success')
          this.$store.dispatch('device/getOneByProjectId')
        })
      },
    },
  }
</script>

<style lang="scss" scoped></style>
